<template>
	<div style="width: 100%; height:100vh; position: relative;">
		<div
			style="display: flex; position: absolute;top:46%;left:50%;transform: translate(-50%,-50%);box-shadow: 0 0 0 60px rgba(23,66,255,.2);">
			<div class="login-panel">
				<div class="left">
					<div class="login-logo">
						<h1>
							<img src="@/assets/logo.png" style="width: 240px">
						</h1>
						<p>网站通用后台管理系统</p>
					</div>
					<div class="info">
						<p>
							<i class="foxui-icon-dianhua-o"></i>
							<span>官方热线</span>
							<b></b>
							<span>400-000-888</span>
						</p>
						<p>
							<i class="foxui-icon-gongzuo-o"></i>
							<span>工作时间</span>
							<b></b>
							<span>8:30-17:30</span>
						</p>
					</div>
				</div>
				<div class="right">
					<div class="content">
						<div class="title-box">
							<h1>欢迎登录</h1>
						</div>
						<div class="form-box">
							<el-form size="medium" ref="loginForm" :model="loginForm" :rules="rules">
								<el-form-item prop="username">
									<el-input prefix-icon="el-icon-user" v-model="loginForm.username"
										placeholder="用户名"></el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input prefix-icon="el-icon-lock" show-password placeholder="密码" type="passowrd"
										v-model="loginForm.password"></el-input>
								</el-form-item>
								<el-form-item prop="rememeber">
									<el-checkbox>记住密码</el-checkbox>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" style="width: 100%;" @click="handleLogin">登录</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--footer-->
		<div class="login-footer">
			Powered by 北京安之谷科技有限公司
		</div>
	</div>
</template>

<script>
	import store from '@/store';
	import http from '@/utils/http';
	import router from '@/router/index'
	export default {
		name: "login",
		data() {
			return {
				loginForm: {
					username: 'admin',
					password: '123456',
					remember: false,
				},
				rules: {
					"username": [{
						required: true,
						message: "请填写账号名",
						trigger: 'blur'
					}],
					"password": [{
						required: true,
						message: "请填写登录密码",
						trigger: 'blur'
					}]
				}
			}
		},
		mounted() {
			var uinfo=JSON.parse(localStorage.getItem("userinfo"));
			if(uinfo){
				this.$router.push("/admin/dashboard");
			}
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate((ok) => {
					if (ok) {
						const params = {
							username: this.loginForm.username,
							password: this.loginForm.password
						}
						http.post("/api/admin/users/login", params).then(res => {

							if (res.status == 200 && res.data.code) {
								let {
									data
								} = res.data;
								localStorage.setItem("token", data.token);
								localStorage.setItem("menus",JSON.stringify(data.menus));
								localStorage.setItem("userinfo", JSON.stringify(data.userinfo));						
								this.$router.push("/admin/dashboard");
								
							}
						}).catch(error => {})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.login-panel {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: absolute;
		top: 46%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		-webkit-box-shadow: 0 0 60px rgba(23, 66, 255, .2);
		box-shadow: 0 0 60px rgba(23, 66, 255, .2)
	}

	.login-panel .left,
	.login-panel .right {
		width: 510px;
		height: 500px
	}

	.login-panel .left {
		background-image: linear-gradient(135deg, #14a9ff, #026df8);
		position: relative;
		border-radius: 8px 0 0 8px
	}

	.login-panel .left .login-logo {
		position: absolute;
		top: 40%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%)
	}

	.login-panel .left .login-logo h1 {
		font-size: 56px;
		font-weight: 600;
		margin: 0;
		position: relative;
		display: inline-block;
		color: #fff;
		text-shadow: 0 0 8px rgba(0, 0, 0, .2)
	}

	.login-panel .left .login-logo h1::after {
		content: "®";
		font-size: 16px;
		font-weight: normal;
		position: absolute;
		top: 6px;
		right: -16px
	}

	.login-panel .left .login-logo p {
		margin: 0;
		font-size: 24px;
		display: inline-block;
		text-shadow: 0 0 6px rgba(0, 0, 0, .2);
		color: #fff
	}

	.login-panel .left .info {
		position: absolute;
		bottom: 5%;
		left: 4%
	}

	.login-panel .left .info p {
		margin: 0;
		font-size: 15px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		color: rgba(255, 255, 255, .9)
	}

	.login-panel .left .info p i {
		margin-right: 4px;
		font-size: 18px
	}

	.login-panel .left .info p b {
		display: inline-block;
		width: 1px;
		height: 15px;
		background-color: rgba(255, 255, 255, .9);
		margin: 0 8px
	}

	.login-panel .right {
		background-color: #fff;
		position: relative;
		border-radius: 0 8px 8px 0
	}

	.login-panel .right .content {
		position: absolute;
		width: calc(100% - 112px);
		left: 56px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%)
	}

	.login-panel .right .content .title-box {
		margin-bottom: 54px
	}

	.login-panel .right .content .title-box h1 {
		font-size: 40px;
		font-weight: bold;
		text-align: center;
		margin: 0
	}

	.login-footer {
		position: absolute;
		bottom: 20px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		text-align: center;
		font-size: 12px;
		line-height: 1.6em;
		color: #666;
	}
</style>